---
layout: default
---
<div class="container-fluid" style="margin-top:20px">
  <div class="container-fluid">
    <div class="row">
      <ol class="breadcrumb">
        <li><a href="{{site.baseurl}}/">Home</a></li>
        <li class="active">Statistics</li>
      </ol>
    </div>
    <div class="row">
      &nbsp;
    </div>
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Index</h3></div>
        <div class="panel-body" style="overflow-x:auto;">
          <ul>
            <li><strong>Repositories:</strong> {{page.n_repos}}</li>
            <li><strong>Packages:</strong> {{page.n_packages}}</li>
            <li><strong>Errors:</strong> <a href="{{site.baseurl}}/stats/errors">{{page.n_errors}}</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Known Packages</h3></div>
        <div class="panel-body" style="overflow-x:auto;">
          <div class="venn text-center"></div>
        </div>
      </div>
    </div>
    <div class="row">
      &nbsp;
    </div>
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Distro Activity</h3></div>
        <div class="panel-body" style="overflow-x:auto;">
          <p>
          Below are histograms of repositories updated over the last 2000 days in each distro.
          </p>

        {% for hist_values in page.distro_activity %}
          {% assign distro = hist_values[0] %}
          <h3>{{distro}} <small>{{hist_values[1] | size}} repos</small></h3>
          <br><br>
          <div id="activity_hist_{{distro}}" class="text-center"></div>
        {%endfor%}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.venn {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}
.venntooltip {
  position: absolute;
  text-align: center;
  width: 128px;
  height: 24px;
  background: #333;
  color: #ddd;
  padding: 2px;
  border: 0px;
  border-radius: 8px;
  opacity: 0;
}
</style>

<script src="https://d3js.org/d3.v2.min.js"></script>
<script src="{{site.baseurl}}/js/venn.js/venn.js"></script>
<script src="{{site.baseurl}}/js/mds.js"></script>
<script src="{{site.baseurl}}/js/numeric-1.2.6.js"></script>
<script>
// define sets and set set intersections
var sets = [
    {% for distro in page.distro_counts %}
      {label: "{{distro[0]}}", size: {{distro[1]}}},
    {% endfor %}
  ],
  overlaps = [
    {% for ol in page.distro_overlaps %}
      {sets: {{ol[0]}}, size: {{ol[1]}}},
    {% endfor %}
  ];

// get positions for each set
sets = venn.venn(sets, overlaps, {layoutFunction: venn.classicMDSLayout});

// draw the diagram in the 'venn' div
var diagram = venn.drawD3Diagram(d3.select(".venn"), sets, 500, 300);

// add a tooltip showing the size of each set/intersection
var tooltip = d3.select("body").append("div")
    .attr("class", "venntooltip");

d3.selection.prototype.moveParentToFront = function() {
  return this.each(function(){
    this.parentNode.parentNode.appendChild(this.parentNode);
  });
};

// hover on all the circles
diagram.circles
    .style("stroke-opacity", 0)
    .style("stroke", "white")
    .style("stroke-width", "2");

diagram.nodes
    .on("mousemove", function() {
        tooltip.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseover", function(d, i) {
        var selection = d3.select(this).select("circle");
        selection.moveParentToFront()
            .transition()
            .style("fill-opacity", .5)
            .style("stroke-opacity", 1);

        tooltip.transition().style("opacity", .9);
        tooltip.text(d.size + " packages");
    })
    .on("mouseout", function(d, i) {
        d3.select(this).select("circle").transition()
            .style("fill-opacity", .3)
            .style("stroke-opacity", 0);
        tooltip.transition().style("opacity", 0);
    });

// draw a path around each intersection area, add hover there as well
diagram.svg.selectAll("path")
    .data(overlaps)
    .enter()
    .append("path")
    .attr("d", function(d) {
        return venn.intersectionAreaPath(d.sets.map(function(j) { return sets[j]; }));
    })
    .style("fill-opacity","0")
    .style("fill", "black")
    .style("stroke-opacity", 0)
    .style("stroke", "white")
    .style("stroke-width", "2")
    .on("mouseover", function(d, i) {
        d3.select(this).transition()
            .style("fill-opacity", .1)
            .style("stroke-opacity", 1);
        tooltip.transition().style("opacity", .9);
        tooltip.text(d.size + " packages");
    })
    .on("mouseout", function(d, i) {
        d3.select(this).transition()
            .style("fill-opacity", 0)
            .style("stroke-opacity", 0);
        tooltip.transition().style("opacity", 0);
    })
    .on("mousemove", function() {
        tooltip.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
    })
</script>

<style>
.bar rect {
  fill: #158cba;
  shape-rendering: crispEdges;
}

.bar text {
  fill: #fff;
  font-size: 15px;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.histtooltip {
  position: absolute;
  text-align: center;
  width: 40px;
  height: 24px;
  background: #333;
  color: #ddd;
  padding: 2px;
  border: 0px;
  border-radius: 8px;
  opacity: 0;
}
</style>


<script>

function makeHist(selector, values) {
  // A formatter for counts.
  var formatCount = d3.format(",.0f");

  var margin = {top: 10, right: 30, bottom: 30, left: 30},
      width = 650 - margin.left - margin.right,
      height = 150 - margin.top - margin.bottom;

  var max_age = 2000;
  var x = d3.scale.linear()
      .domain([1, max_age])
      .range([0, width]);

  // Generate a histogram using twenty uniformly-spaced bins.
  var data = d3.layout.histogram()
      .bins(x.ticks(30))
      (values);

  var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return d.y; })])
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var svg = d3.select(selector).append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var bar = svg.selectAll(".bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

  var tooltip = d3.select("body").append("div")
    .attr("class", "histtooltip");

  bar.append("rect")
      .attr("x", 1)
      .attr("width", function(d) { return x(d.dx) - 1; })
      .attr("height", function(d) { return height - y(d.y); })
      .on("mouseover", function(d, i) {
          d3.select(this).transition()
          .style("fill-opacity", .1)
          .style("stroke-opacity", 1);
          tooltip.transition().style("opacity", .9);
          tooltip.text(d.y);
          })
      .on("mouseout", function(d, i) {
          d3.select(this).transition()
          .style("fill-opacity", 1)
          .style("stroke-opacity", 0);
          tooltip.transition().style("opacity", 0);
      })
      .on("mousemove", function() {
          tooltip.style("left", (d3.event.pageX) + "px")
                 .style("top", (d3.event.pageY - 28) + "px");
      });

      /*
  bar.append("text")
      .attr("dy", ".75em")
      .attr("y", 6)
      .attr("x", x(data[0].dx) / 2)
      .attr("text-anchor", "middle")
      .text(function(d) { return formatCount(d.y); });
      */

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
}

{% for hist_values in page.distro_activity %}
  {% assign distro = hist_values[0] %}
  var values_{{distro}} = [{% for v in hist_values[1]%}
      {{v}},{%endfor%}];
  makeHist('#activity_hist_{{distro}}', values_{{distro}});
{% endfor %}

</script>
